<script setup>
/**
 * 核心底部栏
 * 用于发送消息
 */
import { ref } from 'vue'
import { sendMessageAPI } from '@/api/messageAPI.js'
import { useInChatContactInfStore } from '@/stores/useInChatContactInfStore.js'
import { showMessage } from '@/utils/elementUtil.js'

const inChatContactInfStore = useInChatContactInfStore()
const options = ref([])
const message = ref('')

// 引用的消息ID
const referenceMsgId = ref('')

const MOCK_DATA = {
    '@': ['Fuphoenixes', 'kooriookami', 'Jeremy', 'btea'],
    '#': ['1.0', '2.0', '3.0'],
}

const sendMessage = async () => {
    if (inChatContactInfStore.id === undefined || inChatContactInfStore.id === '') {
        showMessage('未指定联系人', 'error')
        return
    }
    if (message.value === '') {
        showMessage('消息不能为空', 'error')
        return
    }
    if (message.value.length > 200) {
        showMessage('消息长度超过限制', 'error')
        return
    }
    await sendMessageAPI(message.value, referenceMsgId.value, inChatContactInfStore.id, 'Text')
    message.value = ''
}
</script>

<template>
    <div style="padding: 20px; overflow: hidden">
        <div class="toolbar">
            <img src="../../../assets/svg/smileyFace.svg" alt="" />
            <img src="../../../assets/svg/file.svg" alt="" />
            <img src="../../../assets/svg/booking.svg" style="height: 30px; width: 30px" alt="" />
            <img src="../../../assets/svg/more.svg" alt="" />
            <el-button type="primary" style="position: absolute; right: 0" @click="sendMessage()"
                >发送
            </el-button>
        </div>
        <el-mention
            v-model="message"
            type="textarea"
            :rows="4"
            :options="options"
            style="height: 150px; width: 100%"
            :prefix="['@', '#']"
            placeholder="可以使用@指定"
        />
    </div>
</template>

<style scoped>
.toolbar {
    position: relative;
    top: -10px;
    width: 100%;
    display: flex;
    line-height: 35px;

    img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }
}

:deep(.el-textarea__inner) {
    height: 130px;
    white-space: normal;
    resize: none;
}
</style>
